<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康数据</title>
    <%- include('./header.ejs') -%>
        <link rel="stylesheet" href="../css/publis.css">
        <link rel="stylesheet" href="../css/fithess.css">
</head>

<body>
    <div class="nav">
        <ul>
            <% for(let i = 0 ; i < fithessDatas.navData.length;i++){ %>
                <li>
                    <%= fithessDatas.navData[i].name%>
                        <div class="EChartes">
                            <div id="<%= fithessDatas.navData[i].className %>" style="width: 100%;height:250px;"></div>
                        </div>
                </li>
                <%}%>

        </ul>

    </div>
    <%- include('./footer.ejs') -%>
        <script src="../js/echarts.js"></script>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script>
            $.ajax({
                url: 'http://127.0.0.1:4523/m1/2428366-0-default/user/1',
                type: 'get',
                datatype: 'json',
                // data: responseData,
                async: false,
                success: function(res) {
                    var myChart1 = echarts.init(document.getElementById('main1'));
                    option1 = {
                        xAxis: {
                            data: ['血压', '血糖', '血氧', '心率']
                        },
                        yAxis: {},
                        series: [{
                            type: 'bar',
                            data: [res.data.id]
                        }]
                    };
                    myChart1.setOption(option1);
                    console.log(res.data.id);
                }
            })


            var myChart2 = echarts.init(document.getElementById('main2'));
            var data = ['2023-2-1', '2023-2-2', '2023-2-3', '2023-2-4', '2023-2-5', '2023-2-5', '2023-2-6', '2023-2-7', '2023-2-1', '2023-2-1', '2023-2-1', '2023-2-1', '2023-2-1', '2023-2-1', '2023-2-1', '2023-2-1', '2023-2-1', '2023-2-1', '2023-2-1', '2023-2-1', '2023-2-20', ];
            // console.log(data.length);
            var startLength = 100 - (3 / data.length * 100);
            console.log(startLength);
            option2 = {

                xAxis: {
                    type: 'category',
                    data: ['2023-2-1', '2023-2-2', '2023-2-3', '2023-2-4', '2023-2-5', '2023-2-5', '2023-2-6', '2023-2-7', '2023-2-8', '2023-2-9', '2023-2-10', '2023-2-11', '2023-2-12', '2023-2-13', '2023-2-14', '2023-2-15', '2023-2-16', '2023-2-17', '2023-2-18', '2023-2-19', '2023-2-20', ],
                    axisLabel: {
                        interval: 0, //加入axisLabel字段,interval后面加你想要间隔的个数
                    },
                    alignTicks: true,
                    splitLine: {
                        show: true,
                        splitArea: { //网格区域
                            show: true //是否显示
                        },
                    },

                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [1, 1, 1, 1, 1, 1, 1, 11, 1, 1, 1, 1, 1, 1, 11, 11, 1, 1, 1, 11, 1],
                    type: 'line',
                }],

                dataZoom: [ //滑动条
                    {
                        // xAxisIndex: 0, //这里是从X轴的0刻度开始
                        // show: true, //是否显示滑动条，不影响使用
                        // type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        // startValue: 0, // 从头开始。
                        // endValue: 4, // 一次性展示4个。
                        type: 'inside',
                        realtime: true,
                        start: startLength,
                        end: 100,
                        startValue: 0
                    }
                ],
            };

            myChart2.setOption(option2);
            var flage = 0;

            function a(b) {
                $('.EChartes').children().css('display', 'none');
                b.children('.EChartes').find('div').css('display', 'block')
            }
            $('.EChartes').children().css('display', 'none');
            $('#main1').css('display', 'block')

            $('.nav ul li').click(function() {
                flage = $(this).index();
                var b = $(this)
                if (flage == 0) {
                    a(b)
                } else if (flage == 1) {
                    a(b)
                } else if (flage == 2) {
                    a(b)
                } else if (flage == 3) {
                    a(b)
                } else if (flage == 4) {
                    a(b)
                } else if (flage == 5) {
                    a(b)
                } else if (flage == 6) {
                    a(b)
                }
            })
        </script>
</body>

</html>